<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本属性-内容对齐方式</title>
    <style>
        .left{
            text-align: left;
        }

        .center{
            text-align: center;
        }
        .right{
            text-align: right;
        }

        /*text-decoration 指定文本是否修饰*/
        .none{
            /*针对超链接，取消下划线*/
            text-decoration: none;
        }

        /*上划线*/
        .overline{
            text-decoration: overline;
        }

        /*下划线*/
        .underline{
            text-decoration: underline;
        }

        /*删除线*/
        .line-through{
            text-decoration: line-through;
        }

        /*首行缩进*/
        .text-indent{
            text-indent: 2em;
        }

        /*实现自动换行*/
        .break-word{
            width: 100px;
            border: 1px solid red;
            word-break: break-word;
        }

        /*vertical-align 设置元素垂直对齐方式*/
        .test p{
            border: 1px solid red;
            line-height: 2em;
            font-size: 16px;
        }

        .test a{
            font-size: 12px;
            margin-left: 10px;
        }

        .baseline a{
            vertical-align: text-top;
        }

        .line-height{
            border: 1px solid red;
            height: 50px;
            /*行高等于高度即可实现垂直居中*/
            line-height: 50px;
        }


    </style>




</head>
<body>
<ul>
    <li class="left">我是第一个li标签，我是左对齐</li>
    <li class="center">我是第一个li标签，我是居中对齐</li>
    <li class="right">我是第一个li标签，我是右对齐</li>
</ul>

<p>
    <a class="none" href="">文本修饰-取消修饰</a><br>
    <span class="underline">为文本修饰-上划线</span><br>
    <span class="overline">为文本修饰-下划线</span><br>
    <span class="line-through">为文本修饰-删除线</span>
</p>


<p class="text-indent">
    这是HTML的段落标签,特点与上行文本和下行文本间隔一行
</p>
<p>
    这是HTML的段落标签,特点与上行文本和下行文本间隔一行
</p>


<div class="break-word">aaaaaaaaaaaa</div>

<ul class="test">
    <li class="baseline">
        <p>参考内容<a href="">基线对齐</a></p>
    </li>
</ul>


<div class="line-height">
    我是div的内容，我的作用可以设置行高也可以设置垂直居中
</div>


</body>
</html>